<template>
  <div class="comment">
      <h4>支持者（{{list.length || '0'}}）</h4>
      <div v-for="(item,index) in list" :key="index" class="conment-list">
        <div class="user-message clear-fix">
          <div class="image">
            <img :src="item.userUrl" alt="">
          </div>
          <div class="user-name">
            <span>{{item.userName}}</span>
            <span>支持</span>
            <span>￥{{item.money ||　0}}</span>
          </div>
          <div class="user-date">
            <span>{{utils.parseDate(item.time)}}</span>
            <span @click="revert(item.id)">回复</span>
          </div>
        </div>
        <div class="user-content">
          <div>
            <div v-for="(value,i) in item.commentModelList" :key="i">
              <span>{{value.userModel && value.userModel.userName}}：</span> {{value.commentContent}}
            </div>
          </div>
        </div>
        <!-- 回复弹框 -->
        <div class="reply-bar" v-show="reply">
          <div class="bgi" @click="reply=false"></div>
          <div class="reply">
            <h4>回复</h4>
            <textarea v-model="comment.commentContent" title=" " placeholder="我想对他（她）说…" cols="30" rows="10"></textarea>
            <div>
              <button @click="setComment">发表</button>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            reply: false,
            list: [],
            comment: {
                type: 17,
                id: '',
                commentContent: ''
            },
            userMark: [],//支持标识

        }
    },
    props: ['supportList', 'identification'],
    methods: {
        // 点击回复
        revert(id) {
            if(!this.utils.cookie('get','user')){
                 mui.toast('请登录……')
                this.$router.push({path:'/login'})
                return
            }
            this.comment.id = id
            this.reply = true
        },
        // 设置评论
        setComment() {
            if (!this.comment.commentContent) {
                return mui.toast('您评论的内容不能为空')
            }
            this.utils.$post(
                this.utils.SET_COMMENT,
                data => {
                    this.getSupport();
                    this.comment.commentContent = ''
                    this.reply = false
                },
                this.comment
            )
        },
        // 获取支持详情
        getSupport() {
            this.utils.$get(
                this.utils.GET_SUPPOIRT_DETAILS,
                data => {
                    let lists = data.data || {}
                   
                    this.list = lists.list
                      console.log(this.list,'获取到的列表')
                },
                { userId: this.identification[0], activityId: this.identification[1] }
            )
        }
    },
    watch: {
        supportList(newVal) {
            this.list = newVal
        },
        identification(newVal) {
            this.userMark = newVal
        }
    }
}
</script>


<style lang="less">
.comment {
    padding-bottom: 0.99rem;
    > h4 {
        padding: 0.3rem 0.26rem;
        font-weight: 600;
        border-bottom: 1px solid #ddd;
    }
    .conment-list {
        .user-message {
            padding: 0.3rem 0.26rem;
            .image {
                float: left;
                background-color: #666;
                height: 0.8rem;
                width: 0.8rem;
                border-radius: 50%;
                overflow: hidden;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
            .user-name {
                float: left;
                margin-left: 0.2rem;
                > span {            
                    &:nth-child(1) {
                        display: block;
                        font-size: 0.24rem;
                        color: #999;
                    }
                    &:nth-child(2) {
                        display: inline-block;
                        margin: 0.3rem 0;
                        color: #333;
                        font-size: 0.32rem;
                    }
                    &:nth-child(3) {
                        display: inline-block;
                        margin-left: 0.24rem;
                        color: #00d8c9;
                        margin: 0.3rem 0;
                    }
                }
            }
            .user-date {
                float: right;
                > span {
                    &:nth-child(1) {
                        display: block;
                        color: #999;
                        font-size: 0.22rem;
                    }
                    &:nth-child(2) {
                        width: 1rem;
                        text-align: center;
                        float: right;
                        padding: 0.3rem 0.1rem;
                        font-size: 0.24rem;
                        color: #999;
                    }
                }
            }
        }
        .user-content {
            padding: 0 0.26rem;
            > div {
                padding: 0 0 0.4rem 0.95rem;
                border-bottom: 1px solid #ddd;
                > div {
                    background-color: #f6f6f6;
                    border-radius: 5px;
                    font-size: 0.24rem;
                    padding: 0.15rem;
                    > span {
                        display: inline-block;
                        font-size: 0.24rem;
                        &:nth-child(1) {
                            color: #999;
                        }
                    }
                }
            }
        }
        .reply-bar {
            width: 100%;
            height: 100%;
            z-index: 999;
            position: fixed;
            background: rgba(0, 0, 0, 0.1);
            top: 0;
            left: 0;
            .bgi {
                width: 100%;
                height: 100%;
            }
            .reply {
                z-index: 1000;
                display: block;
                width: 6.3rem;
                height: 3.3rem;
                border-radius: 0.04rem;
                background-color: #f6f6f6;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                padding: 0 0.25rem;
                > h4 {
                    color: #232323;
                    padding: 0.3rem 0;
                    text-align: center;
                    font-size: 0.36rem;
                    font-weight: 700;
                }
                > textarea {
                    display: block;
                    height: 1.4rem;
                    margin: 0 auto;
                    border: 1px solid #e5e5e5;
                }
                > div {
                    padding: 0.2rem 0;
                    > button {
                        float: right;
                        height: 0.6rem;
                        background-color: #00d8c9;
                        border-radius: 0.1rem;
                        text-align: center;
                        font-size: 0.28rem;
                        width: 1.2rem;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>
